<template>
  <div v-loading="loading" class="form-content">
    <div class="knowledge-title">
      <span>{{ details.name }}</span>
      <Icon type="ios-create-outline" size="20" @click="editKnowledge" />
    </div>

    <div class="knowledge-type">
      <Icon type="md-list-box" size="16" color="#333" />
      <span>{{ details.kbdoctype }}</span>
    </div>

    <p class="knowledge-desc">{{ details.description || '这个知识库还没有介绍~' }}</p>
    <Divider />

    <div class="knowledge-id">
      <p class="name">知识库 ID</p>
      <p class="val">{{ details.id }}</p>
    </div>

    <div>
      <div class="form-title">
        <span>索引模型</span>
        <span>分块上限: 4000</span>
      </div>

      <Select
        v-model="formData.indexmodel"
        transfer
        placeholder="请选择"
        filterable
        clearable
        @on-change="modelChange"
      >
        <Option v-for="item in SELECT_GATHER_OPTIONS.index" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <div class="form-title">
        <span>文本理解模型</span>
      </div>

      <Select
        v-model="formData.documentmodel"
        transfer
        placeholder="请选择"
        filterable
        clearable
        @on-change="modelChange"
      >
        <Option v-for="item in SELECT_GATHER_OPTIONS.text" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <div class="form-title">
        <span>图片理解模型</span>
      </div>

      <Select
        v-model="formData.imagemodel"
        transfer
        placeholder="请选择"
        filterable
        clearable
        @on-change="modelChange"
      >
        <Option v-for="item in SELECT_GATHER_OPTIONS.image" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <div class="form-title">
        <span>定时同步 <Icon type="ios-help-circle-outline" size="16" /></span>

        <Switch v-model="formData.sync" @on-change="modelChange" />
      </div>

      <div class="form-title">
        <span>处理方式</span>
      </div>
      <Select v-model="formData.docparsetype" transfer placeholder="请选择" @on-change="modelChange">
        <Option v-for="item in DISPOSE_OPTIONS" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <div v-if="formData.docparsetype === 'direct'" class="form-title">
        <span>索引增强</span>

        <Switch v-model="formData.analysisplus" />
      </div>

      <div class="form-title">
        <span>参数设置</span>
      </div>
      <Select v-model="formData.parseparam" transfer placeholder="请选择" @on-change="modelChange">
        <Option v-for="item in PARAMETER_OPTIONS" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <template v-if="formData.parseparam === 'custom'">
        <div class="form-title">
          <span>分块方式</span>
        </div>
        <Select v-model="formData.parsesplittype" transfer placeholder="请选择" @on-change="modelChange">
          <Option v-for="item in SPLIE_TYPE_OPTIONS" :value="item.value" :key="item.value">
            {{ item.label }}
          </Option>
        </Select>

        <div class="form-title">
          <span>重叠字数</span>
        </div>
        <InputNumber
          v-if="formData.parsesplittype === 'size'"
          v-model="formData.parsechartlength"
          :min="1"
          @on-blur="modelChange"
        />
        <Select v-else v-model="formData.delimiteroption" transfer @on-change="modelChange">
          <Option v-for="(item, index) in SPLIT_TYPE_OPTIONS" :value="item.value" :key="index">
            {{ item.label }}
          </Option>
        </Select>

        <template
          v-if="formData.parsesplittype !== 'size' && formData.delimiteroption === 'knowCustomize'"
        >
          <div class="form-title">
            <span>自定义字符</span>
          </div>
          <Input v-model="formData.parsechartlength" @on-blur="modelChange" />
        </template>

        <div class="form-title">
          <span>自定义字符</span>
        </div>
        <InputNumber v-model="formData.parseindexlength" :min="1" @on-blur="modelChange" />
      </template>

      <!-- <Divider /> -->

      <!-- <div class="form-title">
        <span>协作者</span>

        <div>
          <Icon type="ios-settings-outline" size="16" />
          <Icon type="ios-person" size="16" />
        </div>
      </div>

      <div class="no-thing">暂无协作者</div> -->
    </div>

    <EditKnowledgeDialog
      v-if="editKnowledgeDialogDisplay"
      :details="details"
      @submit="editSuccess"
      @cancel="editKnowledgeDialogDisplay = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance, inject } from 'vue'
import { myKnowledge } from '@/api/modules/knowledgeBase'
import {
  DISPOSE_OPTIONS,
  SPLIE_TYPE_OPTIONS,
  PARAMETER_OPTIONS,
  SPLIT_TYPE_OPTIONS
} from '@/util/conf'
import { Message } from 'view-ui-plus'
import EditKnowledgeDialog from './components/EditKnowledgeDialog.vue'

const getTypeId = inject('getTypeId')

const emit = defineEmits(['update-detail'])

const formData = ref({
  imagemodel: '',
  indexmodel: '',
  documentmodel: '',
  sync: false,
  docparsetype: '',
  analysisplus: false,
  parsesplittype: '',
  parseparam: '',
  delimiteroption: '',
  parsechartlength: 1,
  parseindexlength: 1
})

const details = ref({})

const editKnowledgeDialogDisplay = ref(false)

const editKnowledge = () => {
  editKnowledgeDialogDisplay.value = true
}

const modelChange = () => {
  myKnowledge.knowledgeedit({
    data: {
      ...formData.value,
      id: knowledgeeditId.value
    }
  }).then(()=>{
    emit('update-detail', details.value)
  })
}

const knowledgeeditId = ref(undefined)
const loading = ref(false)
const getDetailData = () => {
  loading.value = true
  return myKnowledge
    .cateDetail({
      data: {
        id: getTypeId()
      }
    })
    .then(({ data }) => {
      details.value = data.aihead || {}
      knowledgeeditId.value = data.aiknowledgebody?.id

      for (const key in formData.value) {
        formData.value[key] = data.aiknowledgebody[key]
      }

      emit('update-detail', data)
    })
    .finally(() => {
      loading.value = false
    })
}

const SELECT_GATHER_OPTIONS = ref({
  index: [],
  text: [],
  image: []
})

const getSelectData = () => {
  myKnowledge.findall().then(({ data }) => {
    data.forEach((item) => {
      if (SELECT_GATHER_OPTIONS.value[item.indextype]) {
        SELECT_GATHER_OPTIONS.value[item.indextype].push({
          label: item.name,
          value: item.id
        })
      }
    })
  })
}

const editSuccess = () => {
  editKnowledgeDialogDisplay.value = false
  getDetailData()
}

onMounted(() => {
  getDetailData()
  getSelectData()
})
</script>

<style scoped lang="scss">
.form-content {
  .knowledge-title {
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    .ivu-icon {
      cursor: pointer;
      &:hover {
        opacity: 0.9;
      }
    }
    > span {
      margin-right: 4px;
    }
  }
  .knowledge-type {
    margin: 8px 0;
    background-color: #ececec;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    color: #333;
    > span {
      margin-left: 4px;
    }
  }
  .ivu-input-number{
    width: 100%;
  }
  .ivu-divider{
    margin: 12px 0;
  }
  .knowledge-id {
    .name {
      font-weight: bold;
    }
  }

  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 8px;
    > span {
      &:first-child {
        font-weight: bold;
      }
      &:nth-child(n + 2) {
        color: #333;
      }
    }
  }

  .no-thing {
    background-color: #f1f2f2;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: #333;
  }
}
</style>
